<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title>flashblock.css</title>
<meta name="robots" content="noindex" />
  <link rel="stylesheet" href="http://jashkenas.github.com/docco/resources/docco.css">
</head>
<body>
<div id='container'>
  <div id="background"></div>
  <div id="jump_to">
    Jump To &hellip;
    <div id="jump_wrapper">
      <div id="jump_page">
          <a class="source" href="../360-player/script/360player.html">360player.js</a>
          <a class="source" href="flashblock.html">flashblock.css</a>
          <a class="source" href="../mp3-player-button/script/mp3-player-button.html">mp3-player-button.js</a>
          <a class="source" href="../mpc/script/mpc.html">mpc.js</a>
          <a class="source" href="../page-player/script/page-player.html">page-player.js</a>
          <a class="source" href="../play-mp3-links/script/inlineplayer.html">inlineplayer.js</a>
          <a class="source" href="../../script/soundmanager2.html">soundmanager2.js</a>
          <a class="source" href="../../src/SoundManager2.html">SoundManager2.as</a>
          <a class="source" href="../../src/SoundManager2_AS3.html">SoundManager2_AS3.as</a>
          <a class="source" href="../../src/SoundManager2_SMSound_AS3.html">SoundManager2_SMSound_AS3.as</a>
      </div>
    </div>
  </div>
  <table cellspacing=0 cellpadding=0>
  <thead>
    <tr>
      <th class=docs><h1>flashblock.css</h1></th>
      <th class=code></th>
    </tr>
  </thead>
  <tbody>
    <tr id='section-SoundManager_2_+_useFlashBlock'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-SoundManager_2_+_useFlashBlock">&#182;</a>
        </div>
        <h2>SoundManager 2 + useFlashBlock</h2>

<p>Flash positioning and flashblock / clicktoflash handling</p>
      </td>
      <td class=code>
        <div class='highlight'><pre><span class="nf">#sm2-container</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-2'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-2">&#182;</a>
        </div>
        <p>where the SM2 flash movie goes. by default, relative container.
set relative or absolute here, and don&rsquo;t touch it later or bad things will happen (see below comments.)</p>
      </td>
      <td class=code>
        <div class='highlight'><pre> <span class="k">position</span><span class="o">:</span> <span class="k">absolute</span><span class="p">;</span>
 <span class="k">width</span><span class="o">:</span> <span class="m">1px</span><span class="p">;</span>
 <span class="k">height</span><span class="o">:</span> <span class="m">1px</span><span class="p">;</span>
 <span class="k">overflow</span><span class="o">:</span> <span class="k">hidden</span><span class="p">;</span>
 <span class="c">/* screw IE 6, just make it display nice */</span>
 <span class="n">_overflow</span><span class="o">:</span> <span class="k">hidden</span><span class="p">;</span>
<span class="p">}</span>

<span class="nf">#sm2-container</span> <span class="nt">object</span><span class="o">,</span>
<span class="nf">#sm2-container</span> <span class="nt">embed</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-3'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-3">&#182;</a>
        </div>
        <p>the actual SWF movie bit.
important: The SWF needs to be able to be moved off-screen without display: or position: changes.
changing display: or position: or overflow: here or on parent can cause SWF reload or other weird issues after unblock
e.g., SM2 starts but strange errors, no whileplaying() etc.</p>
      </td>
      <td class=code>
        <div class='highlight'><pre> <span class="k">width</span><span class="o">:</span> <span class="m">48px</span><span class="p">;</span>
 <span class="k">height</span><span class="o">:</span> <span class="m">48px</span><span class="p">;</span>
 <span class="c">/* some flash blockers may also respect this rule */</span>
 <span class="k">max-width</span><span class="o">:</span> <span class="m">48px</span><span class="p">;</span>
 <span class="k">max-height</span><span class="o">:</span> <span class="m">48px</span><span class="p">;</span>
<span class="p">}</span>

<span class="nf">#sm2-container</span><span class="nc">.swf_timedout</span> <span class="p">{</span>
 <span class="c">/* expand to show the timed-out SWF content */</span>
 <span class="k">position</span><span class="o">:</span> <span class="k">relative</span><span class="p">;</span>
 <span class="k">width</span><span class="o">:</span> <span class="m">48px</span><span class="p">;</span>
 <span class="k">height</span><span class="o">:</span> <span class="m">48px</span><span class="p">;</span>
<span class="p">}</span>

<span class="nf">#sm2-container</span><span class="nc">.swf_timedout</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.swf_timedout</span> <span class="nt">object</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.swf_timedout</span> <span class="nt">embed</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-4'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-4">&#182;</a>
        </div>
        <p>when SM2 didn&rsquo;t start normally, time-out case. flash blocked, missing SWF, no flash?
48px square flash placeholder is typically used by blockers.</p>
      </td>
      <td class=code>
        <div class='highlight'><pre> <span class="k">min-width</span><span class="o">:</span> <span class="m">48px</span><span class="p">;</span>
 <span class="k">min-height</span><span class="o">:</span> <span class="m">48px</span><span class="p">;</span>
<span class="p">}</span>

<span class="nf">#sm2-container</span><span class="nc">.swf_unblocked</span> <span class="p">{</span>
 <span class="c">/* SWF unblocked, or was never blocked to begin with; try to collapse container as much as possible. */</span>
 <span class="k">width</span><span class="o">:</span> <span class="m">1px</span><span class="p">;</span>
 <span class="k">height</span><span class="o">:</span> <span class="m">1px</span><span class="p">;</span>
<span class="p">}</span>

<span class="nf">#sm2-container</span><span class="nc">.swf_loaded</span> <span class="nt">object</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.swf_loaded</span> <span class="nt">embed</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.swf_unblocked</span> <span class="nt">object</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.swf_unblocked</span> <span class="nt">embed</span> <span class="p">{</span>
 <span class="c">/* hide flash off-screen (relative to container) when it has loaded OK */</span>
 <span class="k">left</span><span class="o">:</span> <span class="m">-9999em</span><span class="p">;</span>
 <span class="k">top</span><span class="o">:</span> <span class="m">-9999em</span><span class="p">;</span>
<span class="p">}</span>

<span class="nf">#sm2-container</span><span class="nc">.swf_error</span> <span class="p">{</span>
 <span class="c">/* when there is a fatal error (flash loaded, but SM2 failed) */</span>
 <span class="k">display</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span>
<span class="p">}</span>

<span class="nf">#sm2-container</span><span class="nc">.high_performance</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_timeout</span> <span class="p">{</span>
 <span class="c">/* &quot;high performance&quot; case: keep on-screen at all times */</span>
 <span class="k">position</span><span class="o">:</span> <span class="k">absolute</span><span class="p">;</span>
 <span class="k">position</span><span class="o">:</span> <span class="k">fixed</span><span class="p">;</span>
<span class="p">}</span>

<span class="nf">#sm2-container</span><span class="nc">.high_performance</span> <span class="p">{</span>
 <span class="k">overflow</span><span class="o">:</span> <span class="k">hidden</span><span class="p">;</span>
 <span class="n">_top</span><span class="o">:</span> <span class="m">-9999px</span><span class="p">;</span> <span class="c">/* IE 6 hax, no position:fixed */</span>
 <span class="n">_left</span><span class="o">:</span> <span class="m">-9999px</span><span class="p">;</span>
 <span class="k">bottom</span><span class="o">:</span> <span class="m">0px</span><span class="p">;</span>
 <span class="k">left</span><span class="o">:</span> <span class="m">0px</span><span class="p">;</span></pre></div>
      </td>
    </tr>
    <tr id='section-5'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-5">&#182;</a>
        </div>
        <p>special case: show at first with w/h, hide when unblocked.
might be bad/annoying.
try to stay within ClickToFlash &ldquo;invisible&rdquo; limits (so it won&rsquo;t be blocked.)</p>
      </td>
      <td class=code>
        <div class='highlight'><pre> <span class="k">z-index</span><span class="o">:</span> <span class="m">99</span><span class="p">;</span> <span class="c">/* try to stay on top */</span>
<span class="p">}</span>

<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_loaded</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_unblocked</span> <span class="p">{</span>
 <span class="k">z-index</span><span class="o">:</span> <span class="k">auto</span><span class="p">;</span>
<span class="p">}</span>

<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_loaded</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_unblocked</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_unblocked</span> <span class="nt">object</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_unblocked</span> <span class="nt">embed</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-6'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-6">&#182;</a>
        </div>
        <p>8x8px is required minimum to load in fx/win32 in some cases(?)
6x6+ good for fast performance, even better when on-screen via position:fixed
also, clickToFlash (Safari &lt;5.1) may auto-load &ldquo;invisible&rdquo; SWFs at this size</p>

      </td>
      <td class=code>
        <div class='highlight'><pre> <span class="k">height</span><span class="o">:</span> <span class="m">8px</span><span class="p">;</span>
 <span class="k">width</span><span class="o">:</span> <span class="m">8px</span><span class="p">;</span>
<span class="p">}</span>

<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_loaded</span> <span class="p">{</span>
 <span class="c">/* stay bottom/left */</span>
 <span class="k">top</span><span class="o">:</span> <span class="k">auto</span><span class="p">;</span>
 <span class="k">bottom</span><span class="o">:</span> <span class="m">0px</span><span class="p">;</span>
 <span class="k">left</span><span class="o">:</span> <span class="m">0px</span><span class="p">;</span>
<span class="p">}</span>

<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_loaded</span> <span class="nt">object</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_loaded</span> <span class="nt">embed</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_unblocked</span> <span class="nt">object</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_unblocked</span> <span class="nt">embed</span> <span class="p">{</span>
 <span class="c">/* high-performance case must stay on-screen */</span>
 <span class="k">left</span><span class="o">:</span> <span class="k">auto</span><span class="p">;</span>
 <span class="k">top</span><span class="o">:</span> <span class="k">auto</span><span class="p">;</span>
<span class="p">}</span>

<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_timedout</span> <span class="p">{</span>
 <span class="k">z-index</span><span class="o">:</span> <span class="m">99</span><span class="p">;</span> <span class="c">/* try to stay on top */</span>
<span class="p">}</span></pre></div>
      </td>
    </tr>
  </table>
</div>
</body>
